import React,{Component} from 'react';
import Trnav from './trade_nav.jsx';
import Card from '../widget/card/card.jsx';
import './trade.scss';
import LazyLoad from 'react-lazyload';
import { getMarkets } from 'api/good.js';
export default class Trade extends Component{
	constructor (props) {
		super(props)
		this.state={
			shop:[],
			src:'',
			last:'',
			venue_id:'',
			currentPage: 0,
      lastPage: 0
		}
	}
	_getMarkets = (id,num) => { //行业市场商品列表接口
		getMarkets({
			venue_id:id,
			page:num
		}).then(res => {
			if(res.code===1){
				this.setState({
					shop: this.state.shop.concat(res.data.data),
					src: res.data.banner_img,
					venue_id: id,
					currentPage: num,
          lastPage: res.data.last_page
				})
			}
		})
	}
	show (id,num) {
		this.setState({
			shop:[],
			src:''
		},()=>{
			this._getMarkets(id,num)
		})
	}
	componentDidMount () {
		this._getMarkets(this.props.location.state.venue_id,1)
		let that=this;
    let i=1;
    window.onscroll= function(){
      var t = document.documentElement.scrollTop||document.body.scrollTop;
      var b = document.documentElement.scrollHeight||document.body.scrollHeight;
      var h = document.documentElement.clientHeight||document.body.clientHeight;
      if((+t+h) == b && i <= that.state.lastPage && t!==0){
        that._getMarkets( that.state.venue_id,i++);
      }
    }

	}
	render() {
		return (
			<div>
					<Trnav _getMarkets={(id,num)=>this.show(id,num)} id={this.props.location.state.venue_id}/>
				<div className='trade1_content' >
					<img src={this.state.src}/>
					<div className="trade2">
						{this.state.shop.map((item, index) => {
              return (
                <LazyLoad offsetTop={200} key={index} height={0}>
                  <Card shopDetail={{...item, hide: true}}/>
                </LazyLoad>
              )
            })}
					</div>
					<div>	{this.state.last}</div>
				</div>
				<div className={this.state.currentPage >= this.state.lastPage ? 'noMore' : 'card_hide'} style={{textAlign: 'center'}}>————  老板，没有更多了！ ————</div>
			</div>
		)
	}
}
